<template>
<div style="padding: 16px;">
<Row>
	<Col span="6">
		<Button icon="md-add" shape="circle" type="primary" @click="handleAddCause">添加案由</Button>
	</Col>
	<Col span="14"></Col>
	<Col span="4">
		<Input v-model="searchKey" search enter-button placeholder="案由名称" @on-search="handleSearch"/>
	</Col>
</Row>
<br>
<Table ref="table" :max-height="maxHeight" row-key="cause_id" 
		stripe :columns="columns" :data="data"  border  highlight-row>
	<template #action="{ row, index }">
		<div class="ty-flex-row-around">
		    <span>
		     	<Button custom-icon="iconfont icon-bianji" @click="handleEdit(row, index)" shape="circle"></Button>
		    </span>
		    <span>
		      <Button custom-icon="iconfont icon-laji" @click="handleDelete(row, index)" shape="circle"></Button>
		    </span>
		</div>
	</template>
</Table>

<Modal v-model="modal1" :mask-closable="false" width="60" :styles="{top: '20px'}">
  <template #header><p><Icon type="md-map" /><span>&nbsp;案由</span></p></template>
  <template #footer>
  	<Row :gutter="16">
  		<Col span="20">&nbsp;</Col>
  		<Col span="2"><Button type="default" size="large" long  @click="handleModalCancel">取消</Button></Col>
  		<Col span="2"><Button type="primary" size="large" long @click="handleModalSubmit">保存</Button></Col>
  	</Row>	
  </template>
  <Form ref="baseform" :label-width="80">
	  <Card icon="ios-bookmark" title="案由基本信息">
		<template #extra>
			<Button shape="circle" icon="ios-add-circle-outline" @click="handleAddPenalty">添加罚则</Button>
		</template>
		<FormItem label="案由分类">
			<RadioGroup v-model="baseform.type">
				<Radio label="企业" border :disabled="radioDisabled"></Radio>
				<Radio label="个人" border :disabled="radioDisabled"></Radio>
			</RadioGroup>
		</FormItem>
		<FormItem label="案由名称">
			<Input v-model="baseform.cause_name"/>
		</FormItem>
		<FormItem label="简要依据">
			<Input v-model="baseform.regulation"/>
		</FormItem>
		<FormItem label="详细依据">
			<Input v-model="baseform.regulation_detail" type="textarea" :rows="5"/>
		</FormItem>
	  </Card>
	  <Card icon="ios-bookmark" title="罚则" class="ivu-mt-16" v-for="(penalty,p) in baseform.penaltys">
		<template #extra><Icon type="ios-close-circle-outline" size="24" @click="handleRemovePenalty(p)"/></template>
		<FormItem label="简要罚则">
			<Input v-model="baseform.penaltys[p].penalty"/>
		</FormItem>
		<FormItem label="详细罚则">
			<Input v-model="baseform.penaltys[p].penalty_detail" type="textarea" :rows="5"/>
		</FormItem>
		<Button shape="circle" icon="ios-add-circle-outline" 
			class="ivu-mb-16" @click="handleAddItem(p)">添加裁量标准</Button>
		<template v-for="(item, i) in penalty.items">
		  <FormItem :label="'裁量标准 ' + (i+1)">
			<Row><Col span="22">
				<Input type="text" v-model="baseform.penaltys[p].items[i].item_text" placeholder="请输入标准"></Input>
			</Col><Col span="1" offset="1">
				<Icon type="ios-close-circle-outline" size="24" @click="handleRemoveItem(p,i)"/>
			</Col></Row>
		  </FormItem>
		</template>
	  </Card>
  </Form>
</Modal>
</div>
</template>

<script>
export default{
	data(){
		return {
			radioDisabled:false,
			searchKey:'',
			data:[],
			columns:[
				{title:'案由编号',key:'cause_id',minWidth:100},
				{title:'案由名称',key:'cause_name',minWidth:220,tooltip:true},
				{title:'处罚依据',key:'regulation',minWidth:220,ellipsis:true},
				{title:'创建日期',key:'time',minWidth:100},
				{title:'维护人',key:'uname',minWidth:100},
				{title:'操作',slot:'action',minWidth:120}
			],
			modal1:false,
			baseform:{}
		}
	},
	computed:{
		maxHeight(){
		  return window.innerHeight-200
		}
	},
	methods:{
		handleAddCause(){
			this.modal1 = true
			this.radioDisabled=false
			this.baseformInit()
		},
		handleSearch(searchKey){
			this.$axios.post('mainSetting4CauseList.action',{str1:searchKey}).then(res=>{
				this.data=res.data
			})
		},
		handleEdit(row,index){
			this.$axios.post('mainSetting4CauseContent.action',{int1:row.cause_id}).then(res=>{
				this.modal1 = true
				this.radioDisabled=true
				row.penaltys=res.data
				this.baseform=row
			})
		},
		handleDelete(row, index){
			this.$Modal.confirm({
				title: '确定要删除案由？',
				onOk: () => {
					this.$axios.post('mainSetting4CauseDelete.action',{int1:row.cause_id}).then(res=>{
						if(res.data=='suc')this.$Message.success('删除成功')
						this.handleSearch(this.searchKey)
					})
				}
			})
		},
		handleModalSubmit(){
			let that=this
			this.baseform.uname=this.$store.state.user.userInfo.uname
			if(this.baseform.penaltys.length==0){
				this.$Message.warning('请添加罚则')
				return
			}
			let flag=false
			this.baseform.penaltys.forEach(function(t,index){
				if(t.items.length==0){
					that.$Message.warning('请添加裁量标准')
					flag=true
				}
			})
			if(flag)return
			this.$axios.post('mainSetting4CauseSaveOrUpdate.action',this.baseform).then(res=>{
				if(res.data=='suc')this.$Message.success('保存成功')
				this.modal1=false
				this.handleSearch(this.searchKey)
			})
		},
		handleModalCancel(){
			this.modal1=false
		},
		handleAddPenalty(){
			this.baseform.penaltys.push({penalty:'',penalty_detail:'',items:[]})
		},
		handleRemovePenalty(p){
			this.baseform.penaltys.splice(p,1)
		},
		handleAddItem (p) {
			this.baseform.penaltys[p].items.push({item_text:''})
		},
		handleRemoveItem (p,i) {
			this.baseform.penaltys[p].items.splice(i,1)
		},
		baseformInit(){
			this.baseform={
				penaltys: [{penalty:'',penalty_detail:'',items:[]}],
				cause_name:'',regulation:'',regulation_detail:'',type:'企业'
			}
		}
	},
	mounted() {
		this.handleSearch(this.searchKey)
	}
}
</script>

<style>
</style>